<template>
	<view class="mm-list">
		<view 
			class="mm-list__left" 
			v-if="item.imgSrc"
			:style="{
				paddingTop: circle ? '20rpx' : '30rpx',
				paddingBottom: circle ? '20rpx' : '30rpx'
			}"
		>
			<image 
				lazy-load
				:style="{
					width: imgSize[0] + 'rpx',
					height: imgSize[1] + 'rpx',
					borderRadius: circle ? '50%' : '6rpx'
				}" 
				:src="item.imgSrc" 
				mode="aspectFill"
			></image>
		</view>
		<view class="mm-list__right">
			<!-- 这里给计算宽度是因为app上显示不正确，需要计算出剩余宽度 -->
			<view 
				class="mm-list__right__title" 
				:style="{width}"
			>
				<text>{{item.title}}</text>
				<w-tag 
					v-for="(tag, i) in item.tags" 
					:key="i" 
					:color="tag.color || 'primary'"
				>{{tag.name}}</w-tag>
			</view>
			<view 
				class="mm-list__right__content"
				:style="{width}"
				v-if="hasSlot"
			>
				<slot :item="item"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['imgSize', 'circle', 'item', 'slots', 'rightWidth', 'allWidth'],
		computed: {
			width() {
				return this.item.imgSrc ? `calc(${this.allWidth}px - 90rpx - ${this.imgSize[0]}rpx - ${this.rightWidth}px)` : `calc(${this.allWidth}px - 60rpx - ${this.rightWidth}px)`
			},
			hasSlot() {
				// #ifdef APP-VUE || H5
				return this.$slots.default || false;
				// #endif
				// #ifdef MP-WEIXIN
				return this.slots?.default ?? false;
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mm-list {
		display: flex;
		padding: 0 30rpx;
		width: 100%;
		&__left {
			margin-right: 30rpx;
			display: flex;
			align-items: center;
		}
		&__right {
			flex: 1;
			min-width: 0;
			padding: 25rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			&__title {
				display: flex;
				white-space: nowrap;
				text {
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 40rpx;
				}
			}
			&__content {
				height: calc(100% - 40rpx);
			}
		}
	}
</style>
